目录

一、创建覆盖ElementUI样式的文件

二、在项目入口文件中引入上记文件

三、覆盖ElementUI的样式变量

四、如何修改变量以外的样式

五、既然可以直接修改样式，为什么还要覆盖变量

大家好

在Element官网中，提供了四种方法来对样式进行自定义：

本文将按照官网的描述，介绍如何在使用了SCSS的项目中，通过改变SCSS变量修改ElementUI样式，并在此基础上给出示例和补充。

Element 的 theme-chalk 使用 SCSS 编写，我们可以直接在项目中改变 Element 的样式变量。

首先，我们新建一个样式文件，例如 element-variables.scss，用来覆盖ElementUI的样式。（在本文示例中，该文件创建在src根目录）

以下是该文件的基本代码：

上记代码中，我们还没有添加我们想要覆盖的样式。

其中的$--font-path是字体路径变量，是必须进行覆盖的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

"~element-ui/packages/theme-chalk/src/index"是ElementUI的SCSS文件，文件的内容是引用各个组件的SCSS文件。所以如果我们是按需引入组件，此处也可以只引入对应组件的SCSS文件。

关于“~”的用法：URL中“~”后的内容会作为一个模块请求被解析，可以参考VUE-CLI的文档 https://cli.vuejs.org/zh/guide/html-and-static-assets.html#url-%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99。

然后，为了在项目中应用上记文件，我们需要在入口文件中引用，代码如下：

到此为止，我们在样式文件的修改就可以反映在项目中啦。

ElementUI预置了一些样式变量，我们可以查看想要修改的组件的样式文件，也可以通过Element的在线工具（https://element.eleme.io/#/zh-CN/theme/preview）了解可以修改哪些变量。

最后，我们来覆盖ElementUI的样式变量。以修改按钮的样式为例：

ElementUI的按钮提供了多种大小，如果在项目中经常使用某一种大小的按钮，我们一般会在Vue安装Element时进行设定。比如我们使用超小按钮：

我们来看看这个超小按钮的样子吧：

可有时候，我们觉得超小型按钮也有点太大了，我们想调整按钮的大小。于是我们可以覆盖下记两个变量：

现在我们再来看这个按钮，是不是比原来还要小啦

有的时候，只通过修改变量，并不能完全满足我们的需求。一些组件的样式，并未使用SCSS变量。遇到这种情况，我们可以选择覆盖Element的Class。

以下是一个单独修改卡片标题高度的例子：

我们来修改影响标题高度的样式：

这样就大功告成啦~

像主题色之类的样式，组件之间是共用的。只改变一个组件中的主题色样式，会与其他组件的颜色主题不一致，产生违和感。

这其实就是变量的优点，可复用。而且变量名包含语义，读起来也更容易理解，方便维护。

以上就是本文的全部内容啦，本人能力有限，如果记述有误，还请您留言指出，感谢谅解和支持，欢迎留言评论！